import React from 'react';
import Loadable from 'react-loadable';
// import {hierarchize} from './library/hierarchy';

const Loading = () => <span>loading...</span>;

// 路由配置说明
// {
//   key: 'home', //ID，整个路由表唯一
//   path: '/',
//   component: ...
//   exact: true,
//   title: '首页', //标题
//   icon: 'home', //图标
//   hiddenOfMenu: true,  //在菜单上隐藏该项
//   hiddenBreadcrumb: false  //在页面上不显示导航路径
//   children:[...] //子级路由
// }

const CONFIG_ROUTES = [
  {
    key: 'home',
    path: '/',
    component: Loadable({
      loader: () => import('../pages/home'),
      loading: Loading
    }),
    exact: true,
    title: '首页',
    icon: 'Home',
    hiddenOfMenu: true
  },
  {
    key: 'page-tools',
    path: '/page-tools',
    title: '页面工具',
    icon: 'DeveloperTools',
    children: [
      {
        key: 'form-designer',
        path: '/form-designer',
        component: Loadable({
          loader: () => import('../pages/form-designer'),
          loading: Loading
        }),
        title: '表单设计',
        icon: 'FabricFormLibrary',
        hiddenOfMenu: true
      },
      {
        key: 'table-designer',
        path: '/table-designer',
        component: Loadable({
          loader: () => import('../pages/home'),
          loading: Loading
        }),
        title: '表格设计',
        icon: 'Table'
      }
    ]
  }
];

export default CONFIG_ROUTES;

export function mapToPlainRoute(route) {
  return route
    ? {
        key: route.key,
        path: route.paty,
        title: route.title,
        icon: route.icon,
        exact: route.exact,
        strict: route.strict,
        hiddenOfMenu: route.hiddenOfMenu
      }
    : null;
}

// function flatMapToPlainRoute(routes) {
//   return routes.map(item => {
//     const plain = mapToPlainRoute(item);
//     if (item.children) item.children = flatMapToPlainRoute(item.children);
//     return plain;
//   });
// }

// export const plainRoutes = flatMapToPlainRoute(CONFIG_ROUTES) ;
